<template>
    <el-container>
        <el-aside width="200">
          <h1 class="logo"> </h1>
          <el-menu :collapse="collapse"
          class="el-qf-menu"
          :default-active="$route.path"
                 text-color="#4e5bf8"
                 ref="sideMenu"
                 active-text-color="#E47833"
                 >
          <qf-sub-menu :sideMenu='$store.state.userMenu'></qf-sub-menu>
        </el-menu>
        </el-aside>

        <el-container>

            <el-header>
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <div class="grid-content bg-purple" style="textAlign:left">
                  <i @click="collapse = !collapse"
								:class="['iconfont', collapse ? 'icon-fold-right' : 'icon-shouqi1']"></i>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple-light">
                  管理系统
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>


                <b>
                  <svg class="icon"
                    v-if="userInfo.vipLevel"
                    aria-hidden="true">
                    <use :xlink:href="'#' + vipIconName"></use>
                  </svg>
                  <el-dropdown placement="bottom"
                    @command="command">
                    <span class="nickname"
                      :class="vipIconName + '-i'">
                      {{ userInfo.nickname }}
                      <i style="color: #fff"
                        class="iconfont icon-down"></i>
                    </span>
                    <el-dropdown-menu>
                      <el-dropdown-item divided
                        command="charge"
                        v-if="userInfo.vipLevel"
                        icon="iconfont icon-VIP4">vip到期时间:<br />
                        {{ userInfo.vipExpires }}
                        </el-dropdown-item>
                      <el-dropdown-item divided
                        command="charge"
                        icon="iconfont icon-VIP4">vip充值</el-dropdown-item>
                      <el-dropdown-item divided
                        command="mine"
                        icon="iconfont icon-icon-test">账号信息</el-dropdown-item>
                      <el-dropdown-item divided
                        command="product"
                        icon="iconfont icon-shangpinguanli">项目管理</el-dropdown-item>
                      <el-dropdown-item divided
                        icon="iconfont icon-tuichu2"
                        @click.native="quit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
							  </b>
							&nbsp;
                </div>
              </el-col>
            </el-row>
            
            </el-header>


            <el-main>Main
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
   
</template>

<script>
import { mapState } from "vuex";
// import moment from "moment";
  export default {
    data () {
      return {
        collapse:false,
        size:"large" ,
        

      }
    },
    methods:{
     //command 右上角用户下拉菜单触发事件
			command(routerName) {
				//routerName就是下拉菜单传入的路由名字
				if (routerName) {
					this.$router.push({ name: routerName });
				}
			},
			cancel() {
				//取消,中断请求
				this.cancelToken();
			},
			quit() {
				//退出登入
				//1.清除token
				localStorage.removeItem("myx-token");
				//2.跳转到登入页
				this.$router.push("/login");
				//3.刷新页面
				// location.reload();
			},
    },
    computed:{
      ...mapState(["userInfo", "userMenu"]),
      // vipExpries() { 
			// 	//vip过期时间
			// 	let stamp = this.userInfo.vipStamp;
			// 	let date = moment(stamp).format("YYYY-MM-DD HH:mm:ss");
			// 	return date;
			// },
			vipIconName() {
				//计算vip图标名称
				let { vipLevel } = this.userInfo;
				if (vipLevel === 1) {
					return "icon-vip";
				} else if (vipLevel === 2) {
					return "icon-vip2";
				} else if (vipLevel === 3) {
					return "icon-vip_3";
				} else {
					return "";
				}
			},
      squareUrl() {
				//如果用户没有头像,就使用默认头像,如果有,就使用用户头像;
				return this.userInfo?.headimgurl
					? this.userInfo?.headimgurl
					: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
			}
    }
  }

</script>

<style scoped lang="less">
.grid-content {
  font-size: 26px;
  .iconfont {
    font-size: 26px !important;
  }
}
.icon-vip-i,
.icon-vip2-i,
.icon-vip_3-i {
	color: #f4c14f !important;
	font-weight: bolder !important;
}
.icon {
	width: 5em;
	height: 1.5em;
	vertical-align: middle;
}
.el-dropdown-menu,
.el-dropdown-menu__item,
.el-dropdown-menu__item--divided:before {
	background-image: linear-gradient(
		135deg,
		rgb(76, 103, 255),
		rgb(86, 53, 223)
	);
	color: #fff;
	text-align: center;
	font-weight: bolder;
}
.el-dropdown-menu {
	width: 200px;
}
.el-header {
	min-height: 60px !important;
	background: linear-gradient(135deg, #4c67ff, #5635df);
	color: #fff;
	font-weight: bolder;
	text-align: center;
	// line-height: 60px;
	line-height: 40px;
	.left {
		text-align: left;

		i {
			font-size: 30px;
			cursor: pointer;
		}
	}
	.center {
		font-size: 30px;
	}
	.el-avatar {
		vertical-align: middle;
		margin-right: 10px;
	}
	.quit {
		color: deeppink;
		text-decoration: underline;
		cursor: pointer;
	}
	.nickname {
		margin-left: 5px;
		color: #fff;
		cursor: pointer;
	}
}

.el-aside {
	background: linear-gradient(135deg, #4c67ff, #5635df);
	color: #333;
	text-align: center;
	// line-height: 200px;
	.logo {
		min-height: 60px;
		background-image: url(http://chst.vip:8081/stu2/img/logo.be8bbddf.png);
		background-size: 80%;
		background-repeat: no-repeat;
		background-position-y: center;
		background-position-x: 40%;
	}
	.subMenu {
		text-align: left;
	}
	/deep/ .el-qf-menu:not(.el-menu--collapse) {
		width: 200px;
		min-height: 500px;
	}
	//菜单文字样式
	/deep/ .el-menu-item,
	/deep/ .el-submenu__title {
		color: rgb(78, 91, 248);
		// font-weight: bold;
	}
	//菜单图标样式
	/deep/ .iconfont {
		color: rgb(78, 91, 248);
		font-weight: normal;
	}
	//菜单激活样式
	/deep/ .el-menu-item.is-active {
		color: rgb(228, 120, 51);
	}
	/deep/ .el-menu-item.is-active {
		color: rgb(228, 120, 51);
		.iconfont {
			color: rgb(228, 120, 51);
			font-weight: normal;
		}
	}
}

.el-main {
	background-color: #fff;
	color: #333;
	text-align: center;
	// line-height: 160px;
	.el-breadcrumb {
		margin-top: 20px;
		margin-bottom: 30px;
		// /deep/ .el-breadcrumb__inner {
		// 	color: #4e59e9!important;
		// }
		// /deep/ .is-link {
		// 	color:hotpink!important;
		// }
	}
}

.el-container {
	margin-bottom: 40px;
	height: 100%;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}
// 顶栏laout
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.el-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}
.row-bg {
	padding: 10px 0;
}
</style>

